<template>
	<!-- 主页面内容楼层 -->
	<view class="content-floor">
		<image class="floor-img" :src="floors.titlePicUrl" mode=""></image>
		<scroll-view class="floor-list" scroll-x="true" enable-flex >
			<view class="list-item" v-for="item in floors.itemList" :key="item.id">
				<image :src="item.primaryPicUrl" mode=""></image>
				<text>{{item.simpleDesc}}</text>
			</view>
			<view class="list-item-last">
				<text>查看更多>></text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:'ContentFloor',
		props:['floors'] // 方式一
		/* props:{
			floors:Object
		} */ // 方式二
		/* props:{
			floors:{
				type:Object,
				required:true,
				default:{}
			}
		} */ // 方式三
	}
</script>

<style lang="stylus" scoped>
	.content-floor
		margin-top: 6upx
		.floor-img
			width: 100%;
			height: 350rpx;
		.floor-list
			display: flex
			height: 300upx;
			.list-item
				display: flex
				flex-direction: column
				margin-right: 20upx
				text 
					font-size: 28upx
					text-overflow: ellipsis
					overflow: hidden
					display:-webkit-box //将元素作为弹性伸缩盒子模型显示
					-webkit-box-orient:vertical //设置子元素排列方式
					-webkit-line-clamp:2; //根据业务需求设置第几行，超出部分显示省略号
				image 
					background-color: #ccc
					padding-bottom: 10upx
					//padding: 10upx 5upx
					width: 200upx;
					height: 200upx
					
			.list-item-last
				flex-shrink: 0
				width: 200upx
				height: 300upx
				line-height: 260upx
				text-align: center
				font-size: 36upx
</style>